<template>
  <div class="rollCall-container">
    <!-- 原有标签球区域 -->
    <div
      class="wordCloud__tagBall"
      :style="{width:`${this.width}px`,height:`${this.height}px`}"
    >
      <div
        class="wordCloud__tag"
        v-for="(item, index) of data"
        :key="index"
        :style="{
          color: selectedIndexes.includes(index) ? '#ff4d4f' : color[index % color.length],
          ...contentEle[index].style
        }"
      >
        <i class="el-icon-user-solid" />
        <span>{{ item }}</span>
      </div>
    </div>

    <!-- 按钮和人数设置区域 -->
    <div class="wordCloud__home">
      <el-select
        v-model="rollCallCount"
        placeholder="选择点名人数"
        :disabled="isRolling"
        style="width: 160px; margin-right: 10px;"
      >
        <el-option
          v-for="count in [1, 2, 3, 4, 5]"
          :key="count"
          :label="`${count}人`"
          :value="count"
        />
      </el-select>
      <el-button
        type="success"
        @click="startRollCall"
        :disabled="isRolling"
      >开始点名</el-button>
      <el-button
        type="warning"
        @click="stopRollCall"
        :disabled="!isRolling"
      >停止点名</el-button>
      <el-button
        type="primary"
        @click="handleRotate('-1')"
        :disabled="isRolling"
      >横向顺时针</el-button>
      <el-button
        type="primary"
        @click="handleRotate('1')"
        :disabled="isRolling"
      >横向逆时针</el-button>
      <el-button
        type="primary"
        @click="handleRotate('-2')"
        :disabled="isRolling"
      >纵向顺时针</el-button>
      <el-button
        type="primary"
        @click="handleRotate('2')"
        :disabled="isRolling"
      >纵向逆时针</el-button>
    </div>

    <!-- 结果展示区域 -->
    <div v-if="selectedStudents.length > 0" class="result-display">
      <h3>被点到的同学：</h3>
      <p class="selected-name">
        {{ selectedStudents.join('，') }}
      </p>
    </div>

    <!-- 新增学生列表卡片区域 -->
    <div class="student-list-container">
      <el-card class="student-list-card">
        <div slot="header">
          <h3>学生名单</h3>
        </div>
        <div class="student-grid">
          <div
            v-for="(student, index) of data"
            :key="index"
            class="student-card"
            :class="{ 'selected': selectedIndexes.includes(index) }"
          >
            <el-avatar icon="el-icon-user-solid" :style="{ backgroundColor: color[index % color.length] }" />
            <span class="student-name">{{ student }}</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>


<script>
/* eslint-disable no-mixed-operators */
export default {
  name: 'StudentRollCall',
  data: () => ({
    data: [],
    color: ['#2D4DB6', '#04B67C', '#D1AF07', '#E27914', '#CB4A4D', '#B02690'],
    contentEle: [],
    width: 600,
    height: 500,
    direction: '-1',
    speed: 200,
    isRolling: false,
    selectedIndexes: [], // 存储选中的索引数组
    selectedStudents: [], // 存储选中的学生数组
    rollCallCount: 1, // 点名人数设置
    originalSpeed: 200
  }),
  created() {
    // 学生名单
    this.data = [
      '张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十',
      '郑一', '王二', '刘一', '陈二', '杨三', '黄四', '赵五', '吴六',
      '周七', '徐八', '孙九', '马十', '朱一', '胡二', '林三', '郭四',
      '何五', '高六', '罗七', '郑八', '梁九', '谢十'
    ];
    this.contentEle = this.data.map(() => ({
      x: 0,
      y: 0,
      z: 0,
      style: {}
    }));
    this.originalSpeed = this.speed;
  },
  mounted() {
    this.innit();
  },
  methods: {
    innit() {
      const RADIUSX = (this.width - 50) / 2;
      const RADIUSY = (this.height - 50) / 2;
      this.contentEle = [];
      for (let i = 0; i < this.data.length; i += 1) {
        const k = -1 + (2 * (i + 1) - 1) / this.data.length;
        const a = Math.acos(k);
        const b = a * Math.sqrt(this.data.length * Math.PI);
        const x = RADIUSX * Math.sin(a) * Math.cos(b);
        const y = RADIUSY * Math.sin(a) * Math.sin(b);
        const z = RADIUSX * Math.cos(a);
        const singleEle = {
          x,
          y,
          z,
          style: {}
        };
        this.contentEle.push(singleEle);
      }
      this.animate();
    },
    animate() {
      if (this.isRolling) {
        // 点名时加速旋转
        this.rotateX(true);
        this.rotateY(true);
      } else {
        this.rotateX();
        this.rotateY();
      }
      this.move();
      window.requestAnimationFrame(this.animate);
    },
    rotateX(isFast = false) {
      const speedFactor = isFast ? 5 : 1;
      const angleX = ['-1', '1'].includes(this.direction)
        ? Math.PI / Infinity
        : Math.PI / ((Number(this.direction) / 2) * Number(this.speed) / speedFactor);
      const cos = Math.cos(angleX);
      const sin = Math.sin(angleX);

      this.contentEle = this.contentEle.map((t) => {
        const y1 = t.y * cos - t.z * sin;
        const z1 = t.z * cos + t.y * sin;
        return {
          ...t,
          y: y1,
          z: z1
        };
      });
    },
    rotateY(isFast = false) {
      const speedFactor = isFast ? 5 : 1;
      const angleY = ['-2', '2'].includes(this.direction)
        ? Math.PI / Infinity
        : Math.PI / (Number(this.direction) * Number(this.speed) / speedFactor);
      const cos = Math.cos(angleY);
      const sin = Math.sin(angleY);
      this.contentEle = this.contentEle.map((t) => {
        const x1 = t.x * cos - t.z * sin;
        const z1 = t.z * cos + t.x * sin;
        return {
          ...t,
          x: x1,
          z: z1
        };
      });
    },
    move() {
      const CX = this.width / 2;
      const CY = this.height / 2;
      this.contentEle = this.contentEle.map((singleEle, index) => {
        const { x, y, z } = singleEle;
        const fallLength = 500;
        const RADIUS = (this.width - 50) / 2;
        const scale = fallLength / (fallLength - z);
        const alpha = (z + RADIUS) / (2 * RADIUS);
        const left = `${x + CX - 15}px`;
        const top = `${y + CY - 15}px`;
        const transform = `translate(${left}, ${top}) scale(${scale})`;
        // 为选中的学生添加特殊样式
        const style = {
          ...singleEle.style,
          opacity: alpha + 0.5,
          zIndex: parseInt(scale * 100, 10),
          transform,
          transition: this.isRolling ? 'none' : 'all 0.3s ease',
          fontSize: this.selectedIndexes.includes(index) ? '24px' : '15px',
          fontWeight: this.selectedIndexes.includes(index) ? 'bold' : 'normal'
        };
        return {
          x,
          y,
          z,
          style
        };
      });
    },
    handleRotate(value) {
      this.direction = value;
    },
    startRollCall() {
      this.isRolling = true;
      this.selectedStudents = [];
      this.selectedIndexes = [];
      // 重置所有样式
      this.contentEle = this.contentEle.map(ele => ({
        ...ele,
        style: {
          ...ele.style,
          fontSize: '15px',
          fontWeight: 'normal'
        }
      }));
    },
    stopRollCall() {
      this.isRolling = false;
      // 随机选择指定数量的学生（不重复）
      const count = Math.min(this.rollCallCount, this.data.length);
      const selected = new Set();

      while (selected.size < count) {
        const randomIndex = Math.floor(Math.random() * this.data.length);
        selected.add(randomIndex);
      }

      this.selectedIndexes = Array.from(selected);
      this.selectedStudents = this.selectedIndexes.map(index => this.data[index]);
    }
  }
};
</script>


<style lang="less" scoped>
/* 原有样式保持不变 */
.rollCall-container {
  text-align: center;
  padding: 20px;
  margin: auto;
  max-width: 1200px; // 限制最大宽度，避免卡片过宽
}

.wordCloud__tagBall {
  margin: 50px auto;
  position: relative;
}

.wordCloud__tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 0px;
  top: 0px;
  color: green;
  text-decoration: none;
  font-size: 15px;
  font-family: '微软雅黑';
  font-weight: bold;
  transition: all 0.3s ease;

  &:hover {
    color: #ff4d4f;
    cursor: pointer;
  }
}

.wordCloud__home {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  padding: 0 20px;
  align-items: center; // 新增：使选择器和按钮垂直居中对齐
}

.result-display {
  margin-top: 20px;
  padding: 20px;
  border-radius: 8px;
  background-color: #f5f5f5;
  display: inline-block;
}

.selected-name {
  font-size: 28px;
  color: #ff4d4f;
  font-weight: bold;
  margin: 10px 0 0;
}

// 新增学生列表样式
.student-list-container {
  margin-top: 40px;
  padding: 0 20px;
}

.student-list-card {
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  padding: 10px;
}

.student-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  border-radius: 6px;
  transition: all 0.3s ease;
  background-color: #f9f9f9;

  &:hover {
    background-color: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  &.selected {
    background-color: #fff1f0;
    border: 2px solid #ff4d4f;
  }
}

.student-name {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
}
</style>
